<link rel="import" href="../../../node_modules/@polymer/polymer/polymer-element.html">

<dom-module id="playground-button">
  <template>
    <style>
      .square {
        border: 1px solid #3c763d;
        background-color: #5cb85c;
        padding: 10px;
      }
      .rounded {
        border-radius: 5px;
        border: 1px solid #1b6d85;
        background-color: #5bc0de;
        padding: 10px;
      }
    </style>
    <button on-click="handleTap"
            class$="[[computedClass]]">
      [[title]] [[counter]]
    </button>
  </template>
  <script>
    class PlaygroundButton extends Polymer.Element {
      static get is() {
        return 'playground-button';
      }

      static get properties() {
        return {
          title: { type: String, value: 'Click me:' },
          counter: { type: Number, value: 0 },
          isSquare: { type: Boolean, value: false },
          computedClass: { type: String, computed: '_computeClass(isSquare)' },
        };
      }

      handleTap() {
        this.counter += 1;
      }

      _computeClass(isSquare) {
        return isSquare ? 'square' : 'rounded';
      }
    }
    customElements.define(PlaygroundButton.is, PlaygroundButton);
  </script>
</dom-module>
